<template>
  <div class="footer-nav clearfix">
    <router-link to="/" tag="div" class="f-item fl" exact>
      <van-icon name="description" />
      <p>推荐</p>
    </router-link>
    <router-link to="/search" tag="div" class="f-item fl">
      <van-icon name="search" />
      <p>搜索</p>
    </router-link>
    <router-link to="/game" tag="div" class="f-item fl">
      <van-icon name="pending-evaluate" />
      <p>比赛</p>
    </router-link>
    <router-link to="/join" tag="div" class="f-item fl">
      <van-icon name="exchange-record" />
      <p>合作</p>
    </router-link>
    <router-link to="/userCenter" tag="div" class="f-item fl">
      <van-icon name="contact" />
      <p>我的</p>
    </router-link>
  </div>
</template>

<script>
import { Icon } from 'vant';
export default {
  name: 'footerNav',
  components: {
    [Icon.name]: Icon
  }
};
</script>

<style scoped lang="less">
  .footer-nav {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 45px;
    line-height: 20px;
    text-align: center;
    background-color: #fff;
    .f-item {
      width: 20%;
      padding-top: 5px;
      &:active {
        background-color: #fbfbfb;
      }
      .van-icon {
        font-size: 18px;
      }
      &.router-link-active {
        color: #0075ea;
      }
      > p {
        font-size: 12px;
        text-align: center;
        line-height: 1;
      }
    }
  }
</style>
